<template>
  <div :class="['my-alert', `my-alert--${type}`, { 'is-center': center }]">
    <!-- 内容 -->
    <div class="my-alert__content">
      <span class="my-alert__title">
        <!-- 如果父组件有传值就用父组件的 -->
        <slot v-if="$slots.title" name="title"></slot>
        <!-- 这个插槽使用template的特性，如果父组件没有传值就渲染默认的内容，template也是一个容器，使用的好处是它在经过vue处理之后不会渲染在页面上 -->
        <template v-else>{{ title }} </template>
      </span>
      <!-- 关闭按钮 -->
      <i class="my-alert__closebtn iconfont icon-close"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'success',
      validator (title) {
        return ['success', 'warning', 'info', 'error'].includes(title)
      }
    },
    title: {
      type: String,
      default: '默认内容'
    },
    center: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="less">
.my-alert {
  width: 100%;
  padding: 8px 16px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 4px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
  // 成功
  &.my-alert--success {
    background-color: #f0f9eb;
    color: #67c23a;
  }
  // 信息
  &.my-alert--info {
    background-color: #f4f4f5;
    color: #909399;
  }
  // 警告
  &.my-alert--warning {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
  // 错误
  &.my-alert--error {
    background-color: #fef0f0;
    color: #f56c6c;
  }
  // 是否居中
  &.is-center {
    justify-content: center;
  }
  .my-alert__content {
    display: table-cell;
    padding: 0 8px;
  }
  .my-alert__title {
    font-size: 13px;
    line-height: 18px;
  }
  .my-alert__closebtn {
    font-size: 12px;
    opacity: 1;
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
    &::before {
      color: #c0c4cc;
    }
  }
}
</style>
